<template>
  <div class="app-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <!-- 父传子将数据传过去 -->
      <treeTool :node-data="company" :is-company="true" />
      <hr>
      <!-- 树形组件 -->
      <el-tree :data="depts" :default-expand-all="true" :props="{label:'name'}" :expand-on-click-node="false">
        <!-- 使用作用域插槽的方法自定义节点方法 -->
        <template v-slot="scoped">
          <!-- 排版 -->
          <treeTool :node-data="scoped.data" @addDepts="addDepts" @editDepts="editDepts" @loadPage="loadPage()" />
        </template>
      </el-tree>
    </el-card>
    <!-- 弹窗  需要的数据1、弹框是否显示   2、当前点击的对应的对象 -->
    <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @loadPage="loadPage()" />
  </div>
</template>

<script>
// 引入公用组件使用
import treeTool from './components/tree-tool'
import AddDepts from './components/add-depts.vue'
// 引入请求
import { getDepartmentInfo } from '@/api/department'
// 引入封装函数
import { renderTree } from '@/utils'
export default {
  // 注册组件
  components: { treeTool, AddDepts },
  data() {
    return {
      // 公司数据
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      depts: [], // 部门列表
      isShowDialog: false, // 弹框是否显示
      // 当前点击添加部门对应的对象
      nodeData: {}
    }
  },
  async created() {
    // 发送请求获取部门列表
    this.loadPage()
  },
  methods: {
    // 封装获取部门列表
    async loadPage() {
      const { depts } = await getDepartmentInfo()
      this.depts = renderTree(depts, '')
      console.log('部门列表', this.depts)
    },
    // 新增功能
    addDepts(nodeData) {
      // 树形空间点击添加子部门通知父组件的函数,实现将弹框变为true显示，将传过来的对象存储起来
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    // 编辑功能
    async editDepts(nodeData) {
      // 数据回显，在哪里发送请求获取数据，在对话框组件中,需要id
      await this.$refs.addDepts.getEmployer(nodeData.id)
      // 等待数据回来，再弹窗，否则会出现闪一下的情况
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 100px;
  font-size:14px;
}
</style>
